Inhaltsverzeichnis

Sprachelemente von JavaScript

 Funktionen
 Methoden und Standardfunktionen
 Objekte und Eigenschaften
 JavaScript-Standardobjekte
 Variablen und Werte
 Steuerzeichen und besondere Notationen
 Ausdrücke und Operatoren
 Kontrollstrukturen
 Reservierte Wörter
 Verschachtelung und Klammerung
 Event-Handler

Funktionen

 Eine Funktion ist ein "Block" von logisch zusammengehörigen JavaScript-Anweisungen. Sie können eigene Funktionen innerhalb der HTML-Tags <script language="JavaScript"> und </script> definieren. An erlaubten Stellen, z.B. innerhalb der einleitenden HTML-Tags <body...> und <a href...>, oder in einem Formular-Tag wie <input...>, können Sie eine solche selbst definierte Funktion dann aufrufen. Die Definition einer Funktion muß in der gleichen HTML-Datei (in der Regel im Dateikopf) stehen wie die Aufrufe der Funktion.

Funktion definieren

 Bei der Definition innerhalb von <script language="JavaScript"> und </script> hat eine Funktion folgenden Aufbau (Schema): 

  function FunktionsName(Parameter,...)
   {
     JavaScript-Anweisung;
     weitere JavaScript-Anweisungen...
   }

Beispiel 


  function BruttoBetrag(NettoBetrag, Prozentsatz)
   {
    var Ergebnis = NettoBetrag * (1 + (Prozentsatz / 100));
    return Ergebnis;
   }
Mit dem Schlüsselwort function leiten Sie die Definition einer Funktion ein. Dahinter folgt, durch ein Leerzeichen getrennt, ein frei wählbarer Funktionsname, im Beispiel: BruttoBetrag. Vergeben Sie einen Funktionsnamen, der das, was die Funktion leistet, ungefähr beschreibt. Der Name darf keine Leerzeichen und keine deutschen Umlaute enthalten. Als Sonderzeichen ist nur der Unterstrich "_" erlaubt. Der Name sollte nicht länger als 32 Zeichen sein. Achten Sie darauf, daß Sie als Funktionsnamen kein  reserviertes Wort von JavaScript wählen. Groß- und Kleinschreibung werden unterschieden, d.h. beispiel und Beispiel sind nicht das Gleiche!
Unmittelbar hinter dem Funktionsnamen folgt eine öffnende Klammer. Wenn die Funktion keine Parameter erwarten soll, notieren Sie dahinter sofort wieder eine schließende Klammer. Wenn die Funktion Parameter übergeben bekommen soll, notieren Sie innerhalb der Klammer die Namen der Parameter. Die Namen der Parameter sind frei wählbar. Bei den Parameternamen gelten die gleichen Regeln wie beim Funktionsnamen. Mehrere Parameter werden durch Kommata voneinander getrennt. Im obigen Beispiel erwartet die Funktion BruttoBetrag die beiden Parameter NettoBetrag und Prozentsatz
Der gesamte Inhalt der Funktion wird in geschweifte Klammern { und } eingeschlossen. Diese Klammern dürfen niemals fehlen!
Alle Anweisungen innerhalb einer Funktion sollten mit einem Strichpunkt abgeschlossen werden.
Die Anweisungen innerhalb der Funktion können sehr unterschiedlicher Natur sein. Da können Sie z.B. Objekteigenschaften ändern, übergebene Parameter verarbeiten und ändern, Berechnungen anstellen usw. Sie können innerhalb von Funktionen auch andere Funktionen oder  Methoden und Standardfunktionen von JavaScript aufrufen. Welche Anweisungen innerhalb einer Funktion stehen, hängt davon ab, was die Funktion leisten soll. Im obigen Beispiel wird aus dem übergebenen Nettobetrag und einem Prozentsatz ein Bruttobetrag errechnet, z.B. für Mehrwertsteuer. Das Ergebnis wird  zurückgegeben.

Funktion aufrufen

 Voraussetzung für einen Funktionsaufruf ist, daß die Funktion definiert wurde. Definierte Funktionen können Sie an erlaubten Stellen innerhalb einer HTML-Datei aufrufen. Der Aufruf hat dabei folgendes Schema: 

  FunktionsName(Parameter,...)

Beispiel im Körper einer HTML-Datei 


  <script>  <!--
    var Endbetrag = BruttoBetrag(4700,15);
    document.write("DM 4700 + 15% MwSt. = " + Endbetrag + " DM");
  //-->  </script>
Die Funktion rufen Sie mit ihrem Funktionsnamen auf. Dahinter folgt die öffnende Klammer. Wenn die Funktion keine Parameter erwartet, notieren Sie hinter der öffnenden gleich eine schließende Klammer. Wenn die Funktion Parameter erwartet, müssen Sie für jeden Parameter einen erlaubten Wert übergeben. Im Beispiel wird die zuvor definierte Funktion BruttoBetrag(...) aufgerufen. Diese Funktion erwartet als Parameter einen Nettobetrag und einen Prozentwert. Die beiden Parameter werden ihr übergeben (Nettobetrag 4700, Prozentsatz 15). Das von der Funktion zurückgegebene Ergebnis wird in der  Variablen Endbetrag gespeichert. In der folgenden Anweisung wird mit Hilfe der JavaScript-Methode document.write(...) das Ergebnis zusammen mit einem sinnvollen Text auf den Bildschirm geschrieben.
Beachten Sie bei der Parameterübergabe an Funktionen und Methoden, daß Zahlen wie 4700 oder Variablen wie Endbetrag ohne weitere Zeichen übergeben werden, Zeichenketten wie " DM " dagegen in Anführungszeichen gesetzt werden.

Rückgabewert einer Funktion

 Eine Funktion kann einen Wert zurückgeben, den sie aufgrund ihrer internen Programmprozeduren ermittelt hat. Beim Aufruf einer Funktion können Sie den Rückgabewert in einer  Variablen auffangen und speichern.

Beispiel 


  function Quadrat(x)
   {
    return x * x;
   }

  function SchreibeQuadrate()
   {
    for (var i = 1; i < 101; i++)
     {
       var Wert = Quadrat(i);
       document.write("<br>Das Quadrat von " + i + " ist " + Wert);
     }
   }
Im Beispiel werden zwei Funktionen definiert. Die erste Funktion Quadrat(...) erhält als Parameter einen Wert x. Aus diesem Wert errechnet die Funktion das Quadrat und gibt es zurück. Die Rückgabe erfolgt mit Hilfe des JavaScript Schlüsselwortes return. Die zweite Funktion SchreibeQuadrate() enthält eine Schleife, die von 1 bis 100 zählt. Innerhalb dieser Schleife wird bei jedem Durchgang die erste Funktion Quadrat mit dem aktuellen Stand des Schleifenzählers i aufgerufen. Das jeweilige Ergebnis wird in der  Variablen Wert gespeichert. In der folgenden Anweisung wird mit Hilfe der JavaScript-Methode document.write(...) das Ergebnis zusammen mit einem sinnvollen Text am Bildschirm ausgegeben. Beachten Sie, daß innerhalb des Textes, der mit document.write ausgegeben wird, auch HTML-Tags vorkommen dürfen - im Beispiel das Tag <br> (Zeilenumbruch). Im Beispiel bewirkt dies, daß jedes der insgesamt 100 Ergebnisse in eine eigene Zeile geschrieben wird.

 Seitenanfang

Methoden und Standardfunktionen

 Im Sprachumfang von JavaScript sind viele Methoden und Standardfunktionen enthalten. Methoden sind Funktionen, die sich auf ein bestimmtes  JavaScript-Standardobjekt oder ein selbst definiertes  Objekt beziehen. Daneben gibt es auch noch einige  objektunabhängige Funktionen.

Aufruf einer Methode (Beispiel) 


   document.write("<center>Willkommen auf unseren Seiten!<br>   Hier geht der Punk ab...</center>")
Im Beispiel wird die Methode document.write aufgerufen. Dabei ist write eine Standardfunktion von JavaScript, die sich auf das JavaScript-Standardobjekt document bezieht. Zuerst wird der Objektname notiert, und dahinter, durch einen Punkt getrennt, der Funktionsname.

Mit document ist immer der Inhalt des gerade aktuellen Fensters des WWW-Browsers gemeint. Die Methode document.write schreibt einen beliebigen Text in das aktuell angezeigte Fenster. Als Parameter erwartet diese Methode eine Zeichenkette, die am Bildschirm ausgegeben werden soll. Der Text wird an der Stelle in das angezeigte Dokument eingefügt, an der der Methodenaufruf innerhalb der HTML-Datei steht.

Aufruf einer Funktion (Beispiel) 


   FarbwertRot = parseInt("51",16)
Im Beispiel wird die JavaScript-Standardfunktion parseInt aufgerufen. Diese Funktion errechnet aus einer als Zeichenkette angegebenen Zahl und einer "Basis" einen numerischen Wert aufgrund der Basis. Im Beispiel wird die Zeichenkette "51" übergeben und als Basis 16 (das ist die Basis für Hexadezimalwerte, wie sie z.B. bei HTML-Farbdefinitionen benötigt wird.
JavaScript-Standardfunktionen werden genauso aufgerufen wie selbst definierte Funktionen. Der Unterschied ist nur, daß JavaScript-Standardfunktionen an keiner Stelle definiert werden müssen und überall zur Verfügung stehen.

Eine Übersicht von Methoden und Standardfunktionen in JavaScript finden Sie im Kapitel  JavaScript-Kurzreferenz.

 Seitenanfang

Objekte und Eigenschaften

 JavaScript gehört zu den objektorientierten Programmiersprachen. Objekte sind Daten und Datenstrukturen mit Eigenschaften. In JavaScript können Sie eigene Objekte anlegen, deren Eigenschaften festlegen und mit diesen Eigenschaften im Programmverlauf arbeiten. Außerdem stellt Ihnen JavaScript wichtige  Standardobjekte zur Verfügung.

Farben - Beispiel eines eigenen Objekts

 Um ein eigenes Objekt anzulegen, sind zwei Schritte nötig. Zuerst müssen Sie das Objekt und seine Eigenschaften benennen. Im zweiten Schritt können Sie dann Variablen definieren, die dem angelegten Objekt Eigenschaftswerte zuweist. Über die Variablen können Sie anschließend einzelne Eigenschaften des Objekts ansprechen und mit geeigneten Anweisungen weiterverarbeiten.

Komplettbeispiel einer HTML-Datei 


  <html>  <head>  <title>Beispiel mit JavaScript</title>  <script language="JavaScript">  <!--
  function Farbe(Farbwert_R, Farbwert_G, Farbwert_B)
   {
    this.Farbwert_R = Farbwert_R;
    this.Farbwert_G = Farbwert_G;
    this.Farbwert_B = Farbwert_B;
   }

  function TestObjekt()
   {
    Test = new Farbe("33","99","C0");
    alert("Der Rotwert meiner Farbe ist Hexadezimal " + Test.Farbwert_R);
   }
  // -->  </script>  </head>  <body onload="TestObjekt()">  </body>  </html>
Um ein neues Objekt und seine Eigenschaften anzulegen, müssen Sie innerhalb der HTML-Tags <script language=""JavaScript"< und </script> eine eigene  Funktion definieren, die so aussieht wie im Beispiel die Funktion Farbe(...). Der Name, den Sie der Funktion geben (im Beispiel der Name Farbe) ist zugleich der Name des Objekts, das Sie mit dieser Funktion anlegen. Als Parameter, die die Funktion erwartet, notieren Sie die Eigenschaften, die Ihr Objekt haben soll. Die Parameternamen sind zugleich die Namen der Objekteigenschaften. Im Beispiel sind das die Eigenschaften Farbwert_R, Farbwert_G und Farbwert_B, denn es soll ein Objekt angelegt werden, das Rot-, Grün- und Blauwert einer Farbe speichern kann. Innerhalb der Funktion notieren Sie alle Anweisungen so wie im Beispiel: für jede Eigenschaft, die bei den Funktionsparametern festgelegt wurde, notieren Sie eine Anweisung, beginnend mit dem JavaScript-Schlüsselwort this, gefolgt von einem Punkt und dem Parameternamen. Dahinter notieren Sie ein Istgleichzeichen, und hinter dem Istgleichzeichen nochmals den Parameternamen. Am Ende jeder Anweisung muß ein Strichpunkt stehen.

Nachdem das Objekt angelegt ist, können Sie an anderen Stellen innerhalb Ihres JavaScripts Instanzen dieses Objekt definieren. Dies geschieht mit Hilfe einer  Variablen und dem JavaScript-Schlüsselwort new. Im Beispiel wird zu Testzwecken eine zweite Funktion TestObjekt() definiert. Darin wird zunächst eine Variable Test angelegt. Diese Variable soll Daten des angelegten Objekts Farbe enthalten. Dies geschieht durch ein Istgleichzeichen hinter dem Variablennamen. Dahinter folgt das JavaScript-Schlüsselwort new und dahinter, durch ein Leerzeichen getrennt, der Name der Funktion, mit der das gleichnamige Objekt angelegt wurde, im Beispiel Farbe. Als Parameter werden dieser Funktion irgendwelche brauchbaren Werte übergeben, im Beispiel "33", "99" und "C0" (typische hexadezimale Farbwerte, wie sie in HTML zum Einsatz kommen).

Ab diesem Moment können Sie mit der Variablen einzelne Objekteigenschaften ansprechen und weiterverarbeiten. Das Schema ist dabei stets Variable.Objekteigenschaft. Im Beispiel wird einfach mit Hilfe der alert-Funktion der Inhalt von Test.Farbwert_R am Bildschirm ausgegeben.

 Seitenanfang

JavaScript-Standardobjekte

 JavaScript stellt Ihnen eine Reihe von Objekten zur Verfügung, die im Zusammenhang mit WWW-Seiten wichtig sind. Mit diesen Objekten können Sie in Ihren JavaScript-Programmen arbeiten. Im folgenden wird ein JavaScript-Objekt zur Erläuterung näher vorgestellt. Eine Übersicht von Objekten und ihren Eigenschaften finden Sie im Kapitel  JavaScript-Kurzreferenz.

Date - Beispiel eines JavaScript-Objekts

 Das JavaScript-Objekt Date ist die "Ober-Instanz" für alles, was Sie in JavaScript mit Datums- und Zeitberechnung machen können. Auf Basis des Date-Objekts können Sie z.B. das aktuelle Datum und die aktuelle Uhrzeit ermitteln, um diese beispielsweise am Bildschirm auszugeben. Auch komplexere Berechnungen, wie etwa die Ermittlung von Feiertagen, können Sie auf der Basis dieses Objekts durchführen - vorausgesetzt, Sie kennen die entsprechenden Algorithmen.

Komplettbeispiel einer HTML-Datei 


  <html>  <head>  <title>Beispiel mit JavaScript</title>  <script language="JavaScript">  <!--
  function SagDatumUndZeit()
   {
    var Jetzt = new Date();
    var Tag = Jetzt.getDate();
    var Monat = Jetzt.getMonth();
    var Jahr = Jetzt.getYear();
    var Stunden = Jetzt.getHours();
    var Minuten = Jetzt.getMinutes();
    var NachVoll  = ((Minuten < 10) ? ":0" : ":");
    alert("Guten Tag!\nHeute ist der "
    + Tag + "." + Monat + "." + Jahr + "\nEs ist jetzt "    + Stunden + NachVoll + Minuten + " Uhr");
   }
  // -->  </script>  </head>  <body onload="SagDatumUndZeit()">  </body>  </html>
Im Beispiel wird mit Hilfe des in JavaScript eingebauten Date-Objekts das aktuelle Datum und die aktuelle Uhrzeit ermittelt. Mit der alert-Funktion werden die ermittelten Einzelwerte zusammen mit einem Begüßungstext sauber formatiert am Bildschirm ausgegeben.

Zuerst muß eine dazu neue  Variable angelegt werden. Im Beispiel ist dies die Variable Jetzt. Diese Variable soll auf Daten des Date-Objekts zugreifen können. Dies geschieht durch ein Istgleichzeichen hinter dem Variablennamen. Dahinter folgt das JavaScript-Schl¸sselwort new und dahinter, durch ein Leerzeichen getrennt, der Aufruf der Standardfunktion Date() zum Erzeugen eines neuen Date-Objekts.

Nach dem Aufruf stehen in Jetzt "theoretisch" alle Einzelheiten des aktuellen Datums und der aktuellen Zeit. Um die einzelnen Objekteigenschaften von Date, also Tag, Monat, Jahr usw. anzusprechen, müssen Sie entsprechende  Methoden des Standardobjekts Date aufrufen. Diese Methoden, z.B. getDate() oder getHours(), haben als Rückgabewert jeweils einen Datums/Uhrzeit-Bestandteil. So liefert getDate() beispielsweise den aktuellen Tag des Monats und getHours() die aktuelle Stundenzahl des Tages. Im Beispiel wird für jeden der benötigten Bestandteile eine Variable definiert. In der Variablen Tag wird beispielsweise durch Aufruf von Jetzt.getDate() der aktuelle Tag des Monats gespeichert.

Die Anweisung im Beispiel, die mit NachVoll ... beginnt, kann an dieser Stelle nicht näher erläutert werden. Die Anweisung ist eine Vorbereitung zur sauberen Formatierung der Uhrzeit.

 Seitenanfang

Variablen und Werte

 Variablen sind Speicherbereiche, in denen bestimmte Daten gespeichert werden. Der Inhalt dieser Speicherbereiche kann durch Programmprozeduren verändert werden.

Beispiele 


  var test;
  var x = 1;
  var y = Math.sin(x);
  x += y;
  var Text = "Der Sinus von 1 ist: "
Variablen können mit Hilfe des JavaScript-Schlüsselworts var definiert werden. Dieses Schlüsselwort ist zwar nicht zwingend notwendig, macht den Quellcode aber lesbarer, da es signalisiert, daß die betreffende Anweisung eine Variablendefinition ist.
Variablen können einfach ohne weitere Wertzuweisung definiert werden, wie in den Beispielen die Variable test. Variablen können aber auch definiert werden, indem ihnen gleich zu Beginn ein Wert zugewiesen wird. Dabei notieren Sie hinter dem Variablennamen ein Istgleichzeichen und dahinter den Wert, den Sie der Variablen zuweisen wollen. Im Beispiel werden zwei Variablen auf diese Weise definiert: die Variablen x und y. Die Variable x bekommt einfach nur den Wert 1 zugewiesen. Bei der Variablen y wird eine  Methode von JavaScript aufgerufen, die den zuzuweisenden Wert erst errechnet. Es handelt sich um eine Methode, die den mathematischen Sinus einer Zahl ermittelt. Im Beispiel wird dieser Methode die zuvor definierte Variable x übergeben. Da x den aktuellen Wert 1 hat, wird y also der Sinus von 1 zugewiesen.
Jede Variablendefinition wird mit einem Strichpunkt abgeschlossen.
Es gibt numerische Variablen und Variablen für Zeichen bzw. Zeichenketten. x und y sind numerische Variablen. Die im Beispiel definierte Variable Text ist eine Zeichenvariable. Dies ist daran erkennbar, daß der ihr zugewiesene Wert, ein Text "Der Sinus von 1 ist: ", in Anführungszeichen gesetzt wird. Sie könnten z.B. eine Variable Nummer = 1; und eine Variable Zeichen = "1" definieren. Der Unterschied ist, daß Sie mit der Variablen Nummer Rechenoperationen anstellen können, mit der Variablen Zeichen nicht.

Namenskonventionen

 Wählen Sie für jede Variable einen Namen, der Ihnen auch nach vier Wochen noch signalisiert, welchen Zweck die Variable hat. Der Name darf keine Leerzeichen und keine deutschen Umlaute enthalten. Als Sonderzeichen ist nur der Unterstrich "_" erlaubt. Der Name sollte nicht länger als 32 Zeichen sein. Achten Sie darauf, daß Sie als Variablennamen kein  reserviertes Wort von JavaScript wählen. Groß- und Kleinschreibung werden unterschieden, d.h. beispiel und Beispiel sind nicht das Gleiche!

Variablen ändern ihre Werte

 Noch eine Bemerkung dazu, wie Variablen ihren Wert ändern: im obigen Beispiel finden Sie die Zeile x += y;. Dies ist keine Variablendefinition, da x zu dem Zeitpunkt bereits existiert und den aktuellen Wert 1 hat. Die Zeile x += y; wurde nur in das Beispiel aufgenommen, um zu zeigen, wie eine Variable ihren aktuellen Wert ändern kann. In der genannten Zeile wird x um den Wert von y erhöht. Da y zum aktuellen Zeitpunkt den Wert "Sinus von 1" hat, erhält x durch die kleine Rechenoperation also den neuen Wert "1 + Sinus von 1".

Wertänderungen von Variablen sind das A & O bei der Programmierung. Sie werden nur dann erfolgreich eigene Programme schreiben können, wenn Sie jederzeit den Überblick haben, was in einer Variablen an einem bestimmten Punkt des Programmablaufs steht. Besonders, wenn Sie mit  Kontrollstrukturen arbeiten, werden Sie schnell feststellen, wie leicht der Überblick über den aktuellen Zustand einer Variablen verloren gehen kann.

Besonderheiten bei JavaScript-Variablen

Variablen von JavaScript sind nicht so streng "getypt" wie in vielen anderen Programmiersprachen. Außer der Unterscheidung von numerischen und nicht-numerischen Variablen gibt es keine Unterscheidung. Kommazahlen und Ganzzahlen benötigen keine unterschiedlichen Typen. Der Inhalt von numerischen Variablen kann ohne vorherige Konvertierung in Zeichenketten auf den Bildschirm oder in Meldungsfenster geschrieben werden.

 Seitenanfang

Steuerzeichen und besondere Notationen

 In JavaScript gibt es spezielle Zeichenfolgen und Notationsmöglichkeiten.

Steuerzeichen bei Zeichenketten

 Bei Zeichenkettenvariablen gibt es die Möglichkeit, Steuerzeichen in den Variablenwert einzufügen.

Beispiele 


  var Variable1 = "Hier erfolgt ein\nZeilenumbruch";
  var Variable2 = "Hier erfolgt ein\fWagenrücklauf";
  var Variable3 = "Hier erfolgt ein\bBackspace";
  var Variable4 = "Hier erfolgt ein\rDOS-Extra-Zeilenumbruch";
  var Variable5 = "Hier erfolgt ein\tTabulator";
  var Variable6 = "Hier erfolgt ein\"Anführungszeichen";
Steuerzeichen dieser Art werden durch das Zeichen \ eingeleitet. Dahinter folgt ein Buchstabe, der das Steuerzeichen markiert.
Das Steuerzeichen \n ist z.B. in alert-Meldungen sinnvoll, um innerhalb des auszugebenden Textes einen Zeilenumbruch einzufügen.
Das Steuerzeichen \t ist z.B. sinnvoll, um etwa innerhalb einer alert-Meldung tabellarische Information auszugeben.
Mit Hilfe der Steuerzeichen \b und \f können sie z.B. in Texten, die Sie in der Statuszeile des WWW-Browsers anzeigen wollen, reizvolle Effekte erzeugen.
Das Steuerzeichen \r sollten Sie zusätzlich zu dem Steuerzeichen \n notieren, wenn \n alleine nicht funktioniert. Das Steuerzeichen \" müssen Sie notieren, wenn Sie innerhalb einer Zeichenkette ein Anführungszeichen verwenden möchten.

Notation numerischer Werte

 Sie können Zahlen ganz normal notieren. Beachten Sie dabei nur, daß bei Kommazahlen anstelle eines Kommas ein Punkt notiert werden muß. So wird die Zahl Pi beispielsweise als 3.1415 notiert. Für sehr hohe und sehr niedrige Zahlen und für komplexe Kommazahlen gibt es daneben aber noch andere Notationsmöglichkeiten.

Beispiele 


  1E1
  1.2345E4
  2e-3
Mit e oder E bestimmen Sie die Anzahl Nullen, die hinter der Zahl vor dem e bzw. E stehen.
Die erste Zahl im Beispiel, 1E1, ist eine 1 mit einer 0 dahinter, also 10.
Die zweite Zahl im Beispiel, 1.2345E4, ist eine andere Schreibweise für 12345. Der Dezimalpunkt wird also einfach um so viele Stellen nach rechts verschoben, wie hinter dem E-Zeichen angegeben.
Die dritte Zahl im Beispiel, 2e-3, ist eine andere Schreibweise für 0.002. Der Dezimalpunkt wird also einfach um so viele Stellen nach links verschoben, wie hinter dem E-Zeichen angegeben. Diese umgekehrte Richtung wird durch das Minuszeichen bewirkt, daß hinter dem e folgt.

 Seitenanfang

Ausdrücke und Operatoren

 Ausdrücke und Operatoren brauchen Sie bei Zuweisungen, bei Vergleichen und bei numerischen Berechnungen.

Zuweisungsoperator

 Der Zuweisungsoperator ist ein Istgleichzeichen.

Beispiel 


  SinnDesLebens = 42;

Vergleichsoperatoren

 Vergleichsoperatoren brauchen Sie, wenn Sie zwei Werte vergleichen wollen, z.B. den aktuellen Inhalt einer  Variablen mit einem fixen Wert.

Beispiele 


  if(SinnDesLebens == 42) return 1;
  if(SinnDesLebens != 42) return 0;
  if(SinnDesLebens > 42) return 0;
  if(SinnDesLebens < 42) return 0;
  if(Alter >= 18) alert("SIE duerfen das hier sehen!");
  if(Alter <= 17) alert("SIE duerfen das hier NICHT sehen!");
Um abzufragen, ob zwei Werte gleich sind, notieren Sie zwei Istgleichzeichen == nebeneinander.
Um abzufragen, ob zwei Werte unterschiedlich sind, notieren Sie zwischen beiden Werten die Zeichen !=.
Um abzufragen, ob ein Wert größer oder gleich ist als ein anderer, notieren Sie die Zeichen >=.
Um abzufragen, ob ein Wert in jedem Fall größer ist als ein anderer, notieren Sie die Zeichen >.
Um abzufragen, ob ein Wert kleiner oder gleich ist als ein anderer, notieren Sie die Zeichen <=.
Um abzufragen, ob ein Wert in jedem Fall kleiner ist als ein anderer, notieren Sie die Zeichen <.

Nähere Information zu der If-Abfrage erhalten Sie im Abschnitt über  Kontrollstrukturen.

Berechnungsoperatoren

Um mit numerischen Werten Berechnungen durchzuführen, brauchen Sie Berechnungsoperatoren.

Beispiele 


  var Zwei = 1 + 1;
  var GarNix = 1 - 1;
  var AuchNix = 81 / 3 - 27;
  var WenigerAlsNix = 81 / (3 - 27);
  var SinnDesLebens = 6 * 7;
  var MachtAuchSinn = 84 / 2;
  var ZufallswertZw1Und60 = jetzt.getTime() % 60;
Mathematische Operatoren notieren Sie mit den dafür üblichen Zeichen. Mit + notieren Sie eine Addition, mit - eine Subtraktion, mit * eine Multiplikation, mit / eine Division. Eine Besonderheit stellt der Operator % dar. Damit wird eine sogenannte Modulo-Division durchgeführt. Bei einer Modulo-Division werden zwei Werte dividiert. Das Ergebnis ist jedoch im Gegensatz zur normalen Division nur der Restwert der Division. Wenn Sie z.B. 13 % 5 notieren, erhalten Sie als Ergebnis 3, weil 13 geteilt durch 5 gleich 2 Rest 3 ergibt. Diese 3 ist es, die als Ergebnis einer Modulo-Division herauskommt.
Sie können mehrere Operationen in Reihe notieren. Dabei gilt die übliche "Punkt-vor-Strich-Regel". Wenn Sie eine andere Regel erzwingen wollen, müssen Sie Klammern verwenden, so wie im vierten der obigen Beispiele.

Inkrementations- und Dekrementations-Operatoren

 Inkrementation bedeutet "Hochzählen", Dekrementation "Herunterzählen". Das Hoch- und Herunterzählen von Variablenwerten ist vor allem innerhalb von Schleifen üblich. Mehr über die in den folgenden Beispielen verwendeten for- und while-Schleifen erfahren Sie im Abschnitt über  Kontrollstrukturen.

Beispiele 


  var Zaehler = 0; var i = 42; var k = 1;
  while(Zaehler <= 10)
   { ++i; *=k; ++Zaehler; }

  var Zaehler = 100; var i = 5000; var k = 123456; var x = 654321;
  while(Zaehler > 0)
   { --i; /=k; %=x; --Zaehler; }
Inkrementation, also Hochzählen, können Sie mit den Grundrechenarten Addition und Multiplikation durchführen, Dekrementation, also Herunterzählen, mit den Grundrechenarten Subtraktion und Division. Additions-Inkrementation wird mit ++ notiert, Multiplikations-Inkrementation mit *=. Subtraktions-Dekrementation wird mit -- notiert, Divisions-Inkrementation mit /=. Mit %= können Sie auch Modulo-Divisionen hoch- bzw. herunterzählen.

Logische Operatoren

 Logische Operatoren brauchen Sie, wenn Sie komplexere Bedingungen für  Kontrollstrukturen formulieren wollen.

Beispiele 


  if(PLZ >= 80000 && PLZ <= 82000)
   alert("Sie wohnen wohl in Muenchen oder Umgebung!")

  if(x > 100 || y == 0)
   break;
Mit dem logischen Operator && verknüpfen Sie zwei oder mehrere Bedingungen durch "und", d.h. beide bzw. alle Bedingungen müssen erfüllt sein, damit die gesamte Bedingung erfüllt ist.
Mit dem logischen Operator || verknüpfen Sie zwei oder mehrere Bedingungen inklusiv durch "oder", d.h. es genügt, wenn eine der Bedingungen erfüllt ist, damit die gesamte Bedingung erfüllt ist.

Bit-Operatoren

 Bit-Operatoren sind nur etwas für Profis. Um Bit-Operatoren richtig einzusetzen, müssen Sie viel von computer-internen Speichervorgängen verstehen. Deshalb werden die Bit-Operatoren hier nur kurz erwähnt.

>> verschiebt Bits nach rechts
<< verschiebt Bits nach links
& definiert in einer Bitmaske eine Und-Bedingung
| definiert in einer Bitmaske eine inklusive Oder-Bedingung
^ definiert in einer Bitmaske eine exklusive Oder-Bedingung

Operator zur Zeichenkettenverknüpfung

Mit einem einfachen Pluszeichen + können Sie eine Zeichenkette an eine andere anhängen.

Beispiel 


 var Vorname = "Stefan " var Zuname = "Muenz" var Name = Vorname + Zuname + ", der Autor dieses Dokuments"
Sie können sowohl Zeichenkettenvariablen als auch direkte Zeichenkettenangaben aneinanderhängen.

 Seitenanfang

Kontrollstrukturen

 Kontrollstrukturen sind das A und O der Programmierung. Erst mit Hilfe von Kontrollstrukturen können Sie etwas anderes als einfache Zuweisungen und Funktions- oder Methodenaufrufe programmieren. So können Sie beispielsweise festlegen, daß Programmteile nur dann ausgeführt werden, wenn bestimmte Bedingungen erfüllt sind, die Sie selbst definieren können. Oder Sie programmieren Schleifen, innerhalb deren Sie Programmvorgänge dynamisch wiederholen können.

Wenn-Dann-Bedingungen mit "if"

 Sie können die Ausführung von Anweisungen von Bedingungen abhängig machen.

Beispiel 


  if(Email-Adresse == "trotzkopp@machmit.de")
   {
    alert("Hallo Du altes Haus, auch mal wieder auf meiner Homepage?!");
    alert("Sei nichtsdestotrotz willkommen <g>!");
   }
  else
   alert("Seien Sie willkommen auf meiner Homepage");
Mit if leiten Sie eine Wenn-Dann-Bedingung ein. Dahinter folgt, in Klammern stehend, die Formulierung der Bedingung. Um solche Bedingungen zu formulieren, brauchen Sie  Vergleichsoperatoren und in den meisten Fällen auch  Variablen. Für Fälle, in denen die Bedingung nicht erfüllt ist, können Sie einen "andernfalls"-Zweig definieren. Dies geschieht durch else.
Der Else-Zweig ist nicht zwingend erforderlich. Wenn Sie mehr als eine Anweisung unterhalb und abhängig von if oder else notieren wollen, müssen Sie die Anweisungen in geschweifte Klammern einschließen.

Einfache Entweder-Oder-Abrage

 Für einfache Entweder-Oder-Bedingungen gibt es eine spezielle Syntax, die Sie alternativ zur if/else-Anweisung verwenden können.

Beispiel 


 var DuBistEin = (Antwort == "42") ? "Genie" : "Dummkopf";
 alert(quot;Deine Antwort zeigt mir, dass Du ein quot; + DuBistEin + "bist!"
Eine einfache Entweder-Oder-Abrage wird mit einer Bedingung eingeleitet. Die Bedingung muß in Klammern stehen, im Beispiel (Antwort == 42). Dahinter wird ein Fragezeichen notiert. Hinter dem Fragezeichen wird ein Wert angegeben, der aktuell ist, wenn die Bedingung erfüllt ist. Dahinter folgt ein Doppelpunkt, und dahinter ein Wert für den Fall, daß die Bedingung nicht erfüllt ist. Da es sich um Werte handelt, die für die Weiterverarbeitung nur sinnvoll sind, wenn sie in einer Variablen gespeichert werden, wird einer solchen Entweder-Oder-Abrage in der Regel eine  Variable vorangestellt, im Beispiel die Variable DuBistEin. Der Variablen wird durch diese Art von Anweisung das Ergebnis der Entweder-Oder-Abrage zugewiesen.
Um Bedingungen zu formulieren, brauchen Sie  Vergleichsoperatoren.

Schleifen mit "while"

 Mit Hilfe von while-Schleifen können Sie Programmanweisungen solange wiederholen, wie die Bedingung, die in der Schleife formuliert wird, erfüllt ist.

Beispiel 


 var i = 0
 while(Antwort != "42")
  {
   alert("Ihre Antwort ist falsch! Hier kommen Sie erst rein,
   wenn die Antwort richtig ist.");
   start();
   i++;
   if(i > 5)
    {
     alert("Sie sind einfach zu dumm, aber
     Sie kommen trotzdem rein! Ist das nicht nett?");
     break;
    }
  }
Eine while-Schleife beginnt mit dem Wort while. Dahinter folgt, in Klammern stehend, die Bedingung. Um eine Bedingung zu formulieren, brauchen Sie  Vergleichsoperatoren. Der Inhalt der Schleife wird solange wiederholt, wie die Schleifenbedingung wahr ist. WICHTIG: Achten Sie bei solchen Schleifen immer darauf, daß es mindestens eine Möglichkeit gibt, um die Schleife nach einer angemessenen Zeit zu beenden. Andernfalls erzeugen Sie eine sogenannte "Endlosschleife", aus der der Anwender nur durch gewaltsames Beenden des WWW-Browsers herauskommt. Das ist besonders bei Online-Sitzungen im WWW sehr ärgerlich!

In der Regel enthält eine while-Schleife mehrere Anweisungen, die innerhalb der Schleife stehen. Notieren Sie alle Anweisungen innerhalb geschweifter Klammern { und }, so wie im Beispiel.

Um Endlosschleifen zu vermeiden, brauchen Sie irgendetwas, das irgendwann zu einem Ausweg aus der Schleife führt. Meistens werden zu diesem Zweck sogenannte "Zähler" definiert, im Beispiel die  Variable i. Diese Variable hat im Beispiel einen Anfangswert von 0 und wird innerhalb der Schleife bei jedem Durchgang mit der Anweisung i++; um 1 erhöht. Wenn im Beispiel der Zählerstand höher als 5 ist, wird mit Hilfe einer  Wenn-Dann-Bedingung sichergestellt, daß der Anwender die Schleife verlassen kann. Wichtig ist dabei auch die Notierung von break;. Durch dieses  reservierte Wort wird der Ausstieg aus einer Schleife sichergestellt.

Schleifen mit "for"

Mit Hilfe von for-Schleifen vermeiden Sie die Probleme von  while-Schleifen. Die Schleifenbedingung einer for-Schleife sieht von vorneherein einen Zähler und eine Abbruchbedingung vor.

Beispiel 


 for(i = 1; i <= 100; i++)
  {
   var x = i * i;
   document.write("<br>Das Quadrat von " + i + "ist " + x);
  }
Eine for-Schleife beginnt mit dem Wort for. Dahinter wird, in Klammern stehend, die Schleifenbedingung formuliert. Bei der for-Schleife gilt dabei eine feste Syntax. Innerhalb der Schleifenbedingung werden drei Anweisungen notiert. In der ersten Anweisung wird ein Schleifenzähler definiert und initialisiert. Im Beispiel wird ein Zähler i definiert und mit dem Wert 1 initialisiert. Die zweite Anweisung enthält die Bedingung, ab der die Schleife beendet wird. Dazu brauchen Sie  Vergleichsoperatoren. In der dritten Anweisung wird der Schleifenzähler so verändert, daß er irgendwann die in der zweiten Anweisung notierte Bedingung erfüllt. Im Beispiel wird i bei jedem Schleifendurchgang um 1 erhöht, so daß der Wert irgendwann größer 100 ist und damit die Bedingung der zweiten Anweisung erfüllt.
Das Beispiel benutzt den Schleifenzähler, um bei jedem Schleifendurchgang das Quadrat des aktuellen Werts zu ermitteln. Das Ergebnis wird dann HTML-formatiert ins aktuelle Dokumentfenster geschrieben.

Eine spezielle Abart der for-Schleife ist die for-in-Schleife.

Beispiel 


  function Objekteigenschaften(Objekt, ObjName)
   {
    var Ergebnis = "";
    for (var Eigenschaft in Objekt)
     {
      Ergebnis += ObjName + "." + Eigenschaft + " = " + Objekt[Eigenschaft] + "<br>";
     }
    return Ergebnis;
   }
In diesem Beispiel ermittelt die Funktion Objekteigenschaften alle Eigenschaften eines  JavaScript-Objekts. Die ermittelten Eigenschaften sammelt die Funktion in einer HTML-formatierten Zeichenkette und gibt diese an eine aufrufende Funktion zurück.

 Seitenanfang

Reservierte Wörter

 JavaScript enthält eine Reihe von Schlüsselwörtern mit bestimmter Bedeutung. Diese "reservierten Wörter" sollten Sie kennen, um nicht versehentlich gleichnamige  Variablen zu definieren. Denn dies ist nicht erlaubt. Einige der reservierten Wörter der folgenden Liste ist bereits in Gebrauch, andere sind für den zukünftigen Sprachausbau von JavaScript geplant.

Liste reservierter Wörter

 Seitenanfang

Verschachtelung und Klammerung

 Unter den  Operatoren und Programmierzeichen von JavaScript gibt es eine festgelegte Rangordnung. Wenn Sie komplexe Rechenoperationen durchführen oder mehrere Bedingungen miteinander verknüpfen, gilt bei der internen Auflösung solcher kompexen Ausdrücke die folgende Rangordnung:
  1. . Rangstufe: ,
  2. . Rangstufe: = += -= *= /= %= <<= >>= >>>= &= ^= |=
  3. . Rangstufe: ?:
  4. . Rangstufe: ||
  5. . Rangstufe: &&
  6. . Rangstufe: |
  7. . Rangstufe: ^
  8. . Rangstufe: &
  9. . Rangstufe: == !=
  10. . Rangstufe: < <= > >=
  11. . Rangstufe: << >> >>>
  12. . Rangstufe: + -
  13. . Rangstufe: * / %
  14. . Rangstufe: ! ~ - ++ --
  15. . Rangstufe: () [] .
Mit Hilfe von Klammern, die absichtlich die unterste Rangstufe in der Prioritätshierarchie darstellen, können Sie die Rangfolge bei den Operatoren beeinflussen und Ausdrücke so bewerten, wie Sie es wünschen.

Beispiele 


  var OffizielleStatistik = 3.29 * 3 + 4.71;
  var MeineStatistik = 3.29 * (3 + 4.71);

  if( x < y || (x > z && z != y))
   HaengDichAuf();
Beachten Sie beim Verschachteln von Klammern, daß die Anzahl der geöffneten und geschlossenen Klammern stets gleich sein muß, damit der gesamte Ausdruck korrekt ist. Die Verschachtelungstiefe ist beliebig.

 Seitenanfang

Event-Handler

 Event-Handler sind die Schnittstelle zwischen HTML-Datei und JavaScript-Code. Erst mit Hilfe von Event-Handlern ist es beispielsweise möglich, einen Befehl wie "Zeige in der Statuszeile Text X an, wenn der Anwender mit der Maus über den Verweis fährt" zu realisieren.

Beispiel 


  <body onLoad="PruefeAnwenderIntelligenz()">
Alle Event-Handler beginnen mit on.... Der Event-Handler onLoad bedeutet beispielsweise so viel wie "beim Laden".
Event-Handler stehen immer innerhalb von HTML-Tags. Welche Event-Handler in welchen HTML-Tags stehen können, wird weiter unten in der Liste der Event-Handler beschrieben. Event-Handler werden genau so notiert wie gewöhnliche Zusatzangaben in HTML-Tags. Hinter dem Namen des Event-Handlers fogt ohne Leerzeichen dazwischen ein Istgleichzeichen. Dahinter folgt, in Anführungszeichen eingeschlossen, der JavaScript-Befehl, der "bei Eintritt des Ereignisses" aufgerufen werden soll. In den meisten Fällen ist dies - wie auch in den Beispielen oben - der Aufruf einer  Funktion, die in der gleichen HTML-Datei innerhalb von <script language="JavaScript"> bzw. </script> definiert ist.

Liste der Event-Handler in JavaScript

 onBlur:
Dieser Event-Handler bedeutet so viel wie "beim Verlassen" und kann innerhalb von Formularen folgenden HTML-Tags vorkommen:

onChange:
Dieser Event-Handler bedeutet so viel wie "bei Verlassen und geändertem Wert" und kann innerhalb von Formularen folgenden HTML-Tags vorkommen:

onClick:
Dieser Event-Handler bedeutet so viel wie "beim Anklicken" und kann innerhalb von Verweisen und Formularen in folgenden HTML-Tags vorkommen:

onFocus:
Dieser Event-Handler bedeutet so viel wie "Bei Positionieren auf dieses Element" und kann innerhalb von Formularen folgenden HTML-Tags vorkommen:

onLoad:
Dieser Event-Handler bedeutet so viel wie "Nach dem Laden" und kann beim Laden von HTML-Dateien folgenden HTML-Tags vorkommen:

onMouseOver:
Dieser Event-Handler bedeutet so viel wie "beim Darüberfahren mit der Maus" und kann innerhalb von Verweisen in folgendem HTML-Tag vorkommen:

onSelect:
Dieser Event-Handler bedeutet so viel wie "beim Markieren von Text" und kann innerhalb von Formularen folgenden HTML-Tags vorkommen:

onSubmit:
Dieser Event-Handler bedeutet so viel wie "beim Absenden" und kann bei Formularen in folgendem HTML-Tag vorkommen:

onUnload:
Dieser Event-Handler bedeutet so viel wie "Nach dem Beenden" und kann beim Laden von HTML-Dateien folgenden HTML-Tags vorkommen:

javascript:
Dies ist eigentlich kein Event-Handler, sondern eher eine Notlösung, die speziell zur Verknüpfung von Verweisen und JavaScript-Code geschaffen wurde. Beispiel:

 Inhaltsverzeichnis
 Seitenanfang

Blättern:

Allgemeines zu JavaScript  |  Anwendungsbeispiele